import React, { useMemo } from 'react'
import { ResultPage, Card, Switch, Button } from 'antd-mobile'
import { useDispatch, useSelector } from 'react-redux'
import { UndoOutline } from 'antd-mobile-icons'
import DatePopup from '../../components/DatePopup';
import './home.css'
import dayjs from 'dayjs'
import { useState } from "react";
import { cityExchange, citySetIsSpeed } from '../../reducers/cigySlice';
const days = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']

function Home() {
    const dispatch = useDispatch()
    // const citySlice = useSelector((state) => state.citySlice)
    const [visible1, setVisible1] = useState(false)
    const { start, end, date, isSpeed, isSeat } = useSelector(state => state.citySlice)
    const isShowfn = (checked) => {
        dispatch(citySetIsSpeed(checked))
    }
    // console.log(citySice)
    const exChageFn = () => {
        dispatch(cityExchange())
    }
    const dayNum = useMemo(() => {
        return dayjs(date).day()
    }, [date])
    return (
        <div>
            <ResultPage
                status=''
                title='火车票'
                description='内容详情可折行，建议不超过两行建议不超过两行建议不超过两行'
            >
                <Card className='citybox'>
                    <div className='city_box'>
                        <div>{start}</div>
                        <UndoOutline onClick={exChageFn} />
                        <div>{end}</div>
                    </div>
                    <div className='city_time' onClick={() => {
                        setVisible1(true)
                    }}>
                        {date}
                        <span>{days[dayNum]}</span>
                    </div>
                    <div className='city_swich'>
                        <span>是否只看高铁</span>
                        <Switch checked={isSpeed} onChange={isShowfn} />
                    </div>
                    <div>
                        <Button block color='primary' size='middle'>
                            查询
                        </Button>
                    </div>
                </Card>
                <DatePopup visible1={visible1} setVisible1={setVisible1} />
            </ResultPage>
        </div>


    )
}

export default Home
